<template>
	<tui-bottom-popup :show="popupShow">
		<view class="title">
			<view class="closeClass" @tap="closeFun">
				取消
			</view>
			
			<view class="okClass">
				<text class="clear" @tap="clearTime">清空</text>
				<text @tap="determine">确定</text>
			</view>
		</view>
		<view class="tab">
			<view class="StartTime " @tap="startTab" :class="tabFlg?'active':''">
				开始时间
			</view>
			<view class="EndTime" @tap="endTab" :class="!tabFlg?'active':''">
				结束时间
			</view>
		</view>
		<view class="tui-popup-box" v-if="tabFlg">
			<picker-view :indicator-style="indicatorStyle" :value="value1" @change="bindChange1">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			    </picker-view-column>
			</picker-view>
		</view>
		<view class="tui-popup-box"  v-if="!tabFlg">
			<picker-view :indicator-style="indicatorStyle" :value="value2" @change="bindChange2">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			    </picker-view-column>
			</picker-view>
		</view>
	</tui-bottom-popup>
</template>

<script>
	// import tuiButton from "@/components/button/button"
	import tuiBottomPopup from "@/components/bottom-popup/bottom-popup"
	// import tuiNumberbox from "@/components/numberbox/numberbox"
	export default {
		props: {
			popupShow: {
				type: Boolean,
				default: false,
			},
			origin:{
				type:String,
				default: ''
			},
			beginDate:{
				type:String,
				default: ''
			},
			endDate:{
				type:String,
				default: ''
			},
		},
		components: {
			// tuiButton,
			tuiBottomPopup,
			// tuiNumberbox
		},
		data() {
			const date = new Date()
			const years = []
			const beginYear = date.getFullYear()
			const endYear = date.getFullYear()
			const months = []
			const beginMonth = (date.getMonth() + 1)>9?(date.getMonth() + 1):"0"+(date.getMonth() + 1)
			const endMonth = (date.getMonth() + 1)>9?(date.getMonth() + 1):"0"+(date.getMonth() + 1)
			const days = []
			const beginDay = date.getDate()>9?date.getDate():"0"+date.getDate()
			const endDay = date.getDate()>9?date.getDate():"0"+date.getDate()
			
			for (let i = 1990; i <= date.getFullYear(); i++) {
			    years.push(String(i))
			}
			
			for (let i = 1; i <= 12; i++) {
				if(i<10){
					months.push('0'+i)
				}else{
					months.push(String(i))
				}
			    
			}
			
			for (let i = 1; i <= 31; i++) {
				if(i<10){
					days.push('0'+i)
				}else{
					
					days.push(String(i))
				}
			}
			
			
			return {
				tabFlg:true,
				yearsNow:years,
				beginMonthNow:beginMonth,
				beginDayNow:beginDay,
				endMonthNow:endMonth,
				endDayNow:endDay,
				years,
				months,
				days,
				beginYear,
				beginMonth,
				beginDay,
				endYear,
				endMonth,
				endDay,
				time:['',''],
				value1: [years.length-1, beginMonth - 1, beginDay - 1],
				value2: [years.length-1, endMonth - 1, endDay - 1],
				ling:' 00:00:00',
				end:' 23:59:59',
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
			}
		},
		created(){
			console.log(this.value1)
			console.log(this.value2)
		},
		watch:{
			beginDate(val){
				if(val){
					let arr=val.split(' ')[0].split('-');
					this.value1=[this.years.indexOf(arr[0]),this.months.indexOf(arr[1]),this.days.indexOf(arr[2])]
					console.log(this.value1)
				}
			},
			endDate(val){
				console.log(val)
				if(val){
					let arr=val.split(' ')[0].split('-');
					this.value2=[this.years.indexOf(arr[0]),this.months.indexOf(arr[1]),this.days.indexOf(arr[2])]
					console.log(this.value2)
				}
			}	
		},
		methods: {
			startTab(){
				// this.time[0]=this.beginYear+'-'+this.beginMonth+'-'+this.beginDay+this.end
				this.tabFlg=true
			},
			endTab(){
				// this.time[1]=this.beginYear+'-'+this.beginMonth+'-'+this.beginDay+this.end
				this.tabFlg=false
			},
			closeFun(){
				this.$emit('colosePopup');
			},
			check(date){
			
			    return (new Date(date).getDate()==date.substring(date.length-2));
			
			},
			determine(){
				let date=this.beginYear+'-'+this.beginMonth+'-'+this.beginDay
				new Date(date)
				// console.log(this.beginYear%4===0){
				// 	if(Number(this.beginMonth)===2){
				// 		if(Number(this.beginDay)===30||Number(this.beginDay)===31){
							
				// 		}
				// 	}
				// }
				
				console.log(new Date(date).getDate())
				console.log(date.substring(date.length-2))
				// this.time[0]=this.beginYear+'-'+this.beginMonth+'-'+this.beginDay+this.ling
			
				if(!this.time[0]){
					this.time[0]=this.beginYear+'-'+this.beginMonth+'-'+this.beginDay+this.ling
				}
				if(!this.time[1]){
					this.time[1]=this.endYear+'-'+this.endMonth+'-'+this.endDay+this.end
				}
				
				let beginTime = new Date(this.time[0].replace(/\-/g, '/')).getTime();
				let endTime = new Date(this.time[1].replace(/\-/g, '/')).getTime();
				console.log(this.time[0])
				console.log(this.time[1])
				console.log(beginTime)
				console.log(endTime)
				if (beginTime > endTime) {
					this.$util.toast('开始时间不能大于结束时间');
					return;
				} 
				this.$emit('determine',this.time);
			},
			clearTime(){
				this.time=['','']
				
				this.value1= [this.yearsNow.length-1,this.beginMonthNow - 1, this.beginDayNow - 1]
				this.value2= [this.yearsNow.length-1, this.endMonthNow - 1, this.endDayNow - 1]
				this.$emit('determine',this.time,'clear');
			},
			bindChange1 (e) {
			    const val = e.detail.value
				this.value1=val
				console.log(val)
				
			    this.beginYear = this.years[val[0]]
			    this.beginMonth = this.months[val[1]]
				this.days=this.dealDateArray(this.beginYear, this.beginMonth)
				
			    this.beginDay = this.days[val[2]]
				this.time[0]=this.beginYear+'-'+this.beginMonth+'-'+this.beginDay+this.ling
			
			},
			bindChange2 (e) {
			    const val = e.detail.value
				this.value2=val
				
			    this.endYear = this.years[val[0]]
			    this.endMonth = this.months[val[1]]
				this.days=this.dealDateArray(this.endYear, this.endMonth)
			    this.endDay = this.days[val[2]]
				
				this.time[1]=this.endYear+'-'+this.endMonth+'-'+this.endDay+this.end
				
			},
			// 传入年份月份返回当月天数
			dealDateArray(year, month) {
				let big = ['01', '03', '05', '07', '08', '10', '12']; //每年的大月数组
				let type; //0为闰年 1为平年
				let dayNum; //当月天数
				let dayArray = new Array() //处理返回的当月天数数组
				if ((year % 100 != 0 && year % 4 == 0 && year % 4 != 0) || (year % 100 == 0 && year % 400 == 0)) { //非世纪年能被4整除且不能被100整除为闰年，世纪年能被400整除为闰年
					// console.log('闰年')
					type = 0
				} else {
					type = 1
					// console.log('平年')
				}
				if (big.includes(month)) {                                      //属于大月数组为大月，31天
					dayNum = 31
					// console.log('大月', dayNum)
				} else {
					if (month == 2) {                                           //闰年2月29天
						if (type == 0) {
							dayNum = 29
							// console.log('闰月', dayNum)
						} else { //平年2月28天
							dayNum = 28
							// console.log('平月', dayNum)
						}
					} else {                                                    //其余小月30天
						dayNum = 30
						// console.log('小月', dayNum)
					}
				}

				for (let i = 1; i <= dayNum; i++) {
					i = i < 10 ? '0' + i : i
					dayArray.push(String(i))
				}
				return dayArray
			},
		}
	}
</script>

<style lang="scss">
	.title{
		    display: flex;
		    justify-content: space-between;
		    padding: 20rpx;
			.closeClass{
				color: #969799;
			}
			.okClass{
				color: #576B95;
				.clear{
					display: inline-block;
					margin-right: 40rpx;

				}
			}
			.titleWord{
				font-size: 36rpx;
				font-weight: 500;
				color: #323233;
			}
	}
	.tab{
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		color: #969799;
		
		.StartTime{
			margin-right: 30rpx;
		}
		.EndTime{
			
		}
	}
	picker-view {
	    width: 100%;
	    height: 600upx;
	    // margin-top:20upx;
	}
	
	.item {
	    line-height: 100upx;
	    text-align: center;
	}
	.active{
		font-size:36rpx;
		color: #323233;
		font-weight: bold;
		padding-bottom: 5rpx;
		border-bottom: 4rpx solid #EA655E;
	}
	/*底部选择弹层*/
	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 10rpx 0 10rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}


	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding: 30rpx;
		padding-top: 0;
		position: relative;
	}

	.close-icon {
		position: absolute;
		top: 0;
		right: 30rpx;
		color: #333;
		font-size: 36rpx;
	}
	
	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: $red;
		font-size: 36rpx;
		.tui-symbol {
			font-size: 26rpx;
		}
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #727272;
	}
	
	.sku-numbox {
		input {
			background-color: #f7f7f7 !important;
		}
	}
	
	.tui-select-info {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #333;
	}

	.tui-popup-scroll {
		height: 600rpx;
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		// border: 2rpx solid $borderColor;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		font-weight: bold;
		position: relative;
		&:after {
			content: "";
			position: absolute;
			// border: 1rpx solid $red;
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
			left: 0;
			top: 0;
		}
	}
	
	.noactived {
		position: relative;
		background-color: #f7f7f7;
		border-color: #f7f7f7;
		pointer-events: none;
		color: #c2c2c2;
		text-decoration: line-through;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}

	.tui-operation {
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);

		&:before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			border-top: 1rpx solid #eaeef1;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}

		.tui-btn-danger {
			// background-color: #ff5000e6 !important;
			border-radius: 50rpx !important;
		}

		.tui-btn-warning {
			border-radius: 50rpx !important;
			margin-right: 16rpx;
			// background-image: linear-gradient(to right, #f9bc4f, #f77522) !important;
		}
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
	}
</style>
